<template>
  <div
    v-loading="isLoading"
    style="height: calc(100% - 0px)"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="fxyj_h ">
      <span
        v-for="(item, index) in tabTitList"
        :key="index"
        :class="{ activeTabs: selectNumDetails == index }"
        class="tabTits"
        @click="change(index)"
      >
        {{ item }}
      </span>
    </div>
    <div class="top_llfxChart">
      <div class="RightCardTitle">
        <span v-show="selectNumDetails === 0">村庄预警统计</span>
        <span v-show="selectNumDetails === 1">河道预警统计</span>
      </div>
       <el-row style="height:90%">
      <el-col :span="11" style="height:95%">
      <Newecharts id="ybyjChartFx" style="height:100%;width:100%" :option="ChartYbData" />
      </el-col>
      <el-col :span="13">
          <!-- ['#ce1f1f', '#f0810b', '#f0c90b', '#00a2fb'] -->
        <div class="chartopdv">
          <p class="charp" v-for="(item,ind) in echarlist" :key="ind">
            <span class="charpsp1" :class="'bacol'+ind"></span>
            <span class="charpsp2">{{item.Txt}}</span>
            <span class="charpsp3">{{item.Count}}</span>
            <span class="charpsp4">{{item.percent}}%</span>
          </p>
        
        </div>
       </el-col>
       </el-row>
    </div>
    <div class="tablebox">
      <div class="RightCardTitle">
        <span v-show="selectNumDetails === 0">村庄预警详情</span>
        <span v-show="selectNumDetails === 1">河道预警详情</span>
      </div>
     
      <template v-if="YjybDetailsList.length > 0">
        <el-collapse class="collapse_div" accordion>
          <el-collapse-item class="m-t-5"
            v-for="(item, index) in YjybDetailsList"
            :key="index"
            :class="'warningLevel' + item.Lvl "
          >
            <template slot="title" style="color: red">
              {{ item.Txt }}
              <span class="rightTitle">
                <span> {{ item.Count }}</span><b v-show="selectNumDetails === 0">个村庄</b><b
                  v-show="selectNumDetails === 1"
                >个河道</b>
              </span>
            </template>
            <div class="stationLst  m-t-5">
               <div class="titleList">
                <span v-show="selectNumDetails === 0">村庄名称</span>
                <span v-show="selectNumDetails === 1">河道</span>
                <!-- <span>防汛责任人</span> -->
                <span>预警时间</span>
              </div>
              <ul class="stationLstul">
                <template v-if="item.Detail.length > 0">
                  <li class="m-t-5"
                    v-for="(stationLstItrm, indexStationLst) in item.Detail"
                    :key="indexStationLst"
                    :class="{ tableBgList: tableybDetails == item.Lvl+'-'+indexStationLst }"
                    @click="tableList(stationLstItrm, item.Lvl+'-'+ indexStationLst)"
                  >
                    <span v-show="selectNumDetails === 0">{{ stationLstItrm.Village }}</span>
                    <span v-show="selectNumDetails === 1">{{ stationLstItrm.Ewcode }}</span>
                    <!-- <span>{{ stationLstItrm.UserName }}</span> -->
                    <span>{{ $moment(stationLstItrm.Ftm).format("MM-DD HH:mm") }}</span>
                  </li>
                </template>
                <template v-else>
                  <div class="noDataLists">暂无数据</div>
                </template>
              </ul>
            </div>
          </el-collapse-item>
        </el-collapse>
      </template>
      <template v-else>
        <div class="noDataLists">暂无数据</div>
      </template>
    </div>
  </div>
</template>
<script>
import Newecharts from '@/views/components/newecharts.vue'
import {
    GetForcastWarningStatisticsDeatil
} from '@/api/xuna.js'
export default {
    name: 'FxyjDetails',
    components: {
        Newecharts
    },
    data() {
        return {
            selectNumDetails: 0,
            tabTitList: ['村庄预警', '河道预警'],
            tableybDetails: -1,
            ChartTestData: {},
            FXitem: {}, // 风险预警的参数
            ChartYbData: {}, // 风险的图表
            YjybDetailsList: [],
            TimeRain: '',
            isLoading: false,
            ybyjPamars: {
                iType: 1,
                dtTime: '',
                wswscd: ''
            },
            echarlist:[],
        }
    },
    beforeDestroy() {
       this.$eventBus.$off('ybyjEvent')
    },
    created() {
        // this.$store.dispatch('rightFold', false)
        this.$eventBus.$on('ybyjEvent', (res) => {
            this.ybyjPamars.dtTime = res.Ftm
            this.ybyjPamars.wswscd = res.strWscd
            this.TimeRain = res.TimeRain;
            this.tableybDetails = -1;
            this.ybDetails()
        })
    },
    methods: {
        change(index) {
            this.selectNumDetails = index
            this.ybyjPamars.iType = index === 0 ? 1 : 3
            this.tableybDetails = -1;
            this.YjybDetailsList = [];
            this.ybDetails()
        },
        tableList(item, index) {
            this.tableybDetails = index
            // const dlgParams = this.$store.getters.dlgParams
            // dlgParams.name = 'WarningDigInfo'
            // dlgParams.params = item
            // dlgParams.params.rvcd = item.SCode
            // dlgParams.params.perioD_END = this.$moment(item.Ftm).format('YYYY-MM-DD HH:mm:ss')
            // console.log(dlgParams.params)
            // // dlgParams.params.isJCYJ = false
            // this.$store.dispatch('dlgParams', dlgParams)
            if (this.selectNumDetails === 0) {
                this.$eventBus.$emit('flyToVillage_YJLJ', item.Ewcode)
            } else if (this.selectNumDetails === 1) {
                this.$eventBus.$emit('flyToRIVL', item.Ewcode)
            }
        },
        // 风险详情
        ybDetails() {
            this.isLoading = true
            GetForcastWarningStatisticsDeatil(this.ybyjPamars).then((res) => {
                this.isLoading = false
                if (res.isSuccess) {
                    this.getFxecharts(res.data)
                    this.YjybDetailsList = res.data.filter(function(item, index) {
                        return item.Detail.length > 0
                    })
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        getFxecharts(ybDetailsList) {
            const colorList = ['#ce1f1f', '#f0810b', '#f0c90b', '#1c38a1'];
            let arlist = ybDetailsList;
            let total = 0;
            arlist.forEach(item=>{
               total += parseFloat(item.Count);
               let txn = item.Txt.split('（');
               item.Txt = txn[0];
            });
             arlist.forEach(item=>{
               if(total == 0){
                  item['percent'] = 0;
               }else{
                let num  = (parseFloat(item.Count) /total) * 100
                if(!/\./.test(num)){//如果没有小数点
                 item['percent'] = num;
                }else{
                  item['percent'] = num.toFixed(1);
                }
               }
            });
            this.echarlist = arlist;
            this.ChartYbData = {
               tooltip: {
                    show:true,
                    trigger: 'item',
                    position: ['40%', '40%'],
                    textStyle:{
                      color: '#ffffff',
                    },
                    backgroundColor:'rgba(2,0,31,0.65)',
                    borderColor:'rgba(2,0,31,0.65)',
                },
                legend: {
                    show: false
                },
                color: colorList,
                series: [{
                    type: 'pie',
                    radius: ['50%','90%'], // 饼图半径
                    center: ['50%', '50%'],
                    //roseType: 'area',
                    itemStyle: {
                        borderRadius: 0
                    },
                    label: {
                        show: false,
                        color: '',
                        formatter: '{c} \n {b}', // b代表名称，c代表对应值，d代表百分比
                        overflow: 'breakAll',
                        lineHeight: 16

                    },
                    data: ybDetailsList.map(function(v, i) {
                        v.label = {
                            color: colorList[i]
                        }
                        return {
                            ...v,
                            value: v.Count,
                            name: v.Txt
                        }
                    })
                }]
            }
        }
    }
}
</script>

<style lang="less" scoped>
	.fxyj_h {
    display: flex;
    justify-content: center;
    align-items: center;
  	margin-bottom:5px;
	}
  .tabTits{
    width: 140px;
    height:28px;
    line-height: 28px;
    padding: 0;
    text-align: center;
    background: url('~@/assets/imgNew/btnritbg.png') no-repeat;
    background-size: 100% 100%;
    color: #CFDDEF;
    font-size: 14px;
  }
  .tabTits:hover,.activeTabs{
    background: url('~@/assets/imgNew/btnritactbg.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
  }
	.top_llfxChart {
		height: 300px;
    .chartsCss{
      height: 230px !important;
     }
	}
.tablebox{
  height: calc(100% - 330px);
  background: rgba(3,34,55,0.4);
    padding: 5px 10px 10px;
    overflow: hidden;

}
.collapse_div {
    //	height: calc(100vh - 680px);
    	height: calc(100% - 40px);
			overflow: auto;
    }
.chartopdv{
    width:100%;
    padding-right:5px;
    margin-top:40px;
    box-sizing: border-box;
  }
  .charp{
    width:100%;
    height: 32px;
    background: rgba(0,150,255,0.3);
    line-height: 32px;
    padding-left:5px;
    margin-bottom:10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
  }
  .charpsp1{
    display: inline-block;
    width:14px;
    height:14px;
    background:#ce1f1f;
  }
  .charpsp2{
   display: inline-block;
   color: #B2C7D9;
   font-size:14px;
   padding-left: 5px;
   text-align: left;
   flex:3;
  }
  .charpsp3{
   display: inline-block;
   color: #fff;
   font-size:14px;
   flex:2;
  }
  .charpsp4{
   display: inline-block;
   color: #fff;
   font-size:14px;
   flex:2;
  }
  .bacol1{
     background:#f0810b;
  }
  .bacol2{
     background:#f0c90b;
  }
  .bacol3{
     background:#1c38a1;
  }
  .stationLstul{
    li{
      span{
        width:49%;
      }
    }
  }
</style>
